<template>
  <common-card :title="'累计订单量'" :value="'2,306,390'">
    <template #default>
      <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
    </template>
    <template v-slot:footer>
      <span>昨日订单量</span>
      <span class="emphasis">2,000,000</span>
    </template>
  </common-card>
</template>

<script setup lang="ts">
import commonCard from "@/components/common-card/index.vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import {
  // BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  // BarSeriesOption,
  LineChart,
  LineSeriesOption,
} from "echarts/charts";
import {
  // TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  // TooltipComponent,
  // TitleComponentOption,
  GridComponent,
  GridComponentOption,
} from "echarts/components";
import { SVGRenderer } from "echarts/renderers";

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  // | BarSeriesOption
  | LineSeriesOption
  // | TitleComponentOption
  | GridComponentOption
>;

// 注册必须的组件
echarts.use([
  // 设置title属性时
  // TitleComponent,
  // TooltipComponent,
  GridComponent,
  LineChart,
  SVGRenderer,
]);
const chartRef = ref();
const initChart = (): void => {
  const chart = echarts.init(chartRef.value, "light", { renderer: "svg" });
  const options: ECOption = {
    xAxis: {
      type: "category",
      show: false,
      // 设置图标距离x轴的间距
      boundaryGap: false,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        // 线条类型
        type: "line",
        //
        data: [
          620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220,
          620,
        ],
        // 设置面积显示
        areaStyle: {
          color: "purple",
        },
        // 平滑的显示
        smooth: true,
        //隐藏线条
        lineStyle: {
          width: 0,
        },
        // 隐藏数据点
        itemStyle: { opacity: 0 },
      },
    ],
    //设置图片显示位置
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
  };
  chart.setOption(options);
};

onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 20);
});
</script>

<style></style>
